<template>
	<div class="address">
		<div v-show="defaultAddress.id" class="address-wrap">
			<!-- 默认地址 -->
			<view class="default-title">
				默认地址
			</view>
			<AddressItem :use-path="2" :address="defaultAddress">
			</AddressItem>

			<!-- 地址列表 -->
			<AddressItem :use-path="2" v-for="address in addressList" :key="address.id" :address="address">
			</AddressItem>

		</div>
		<!-- 添加地址 -->
		<view class="add-address-wrap">
			<view class="add-address" @click="toAddAddress">
				添加地址
			</view>
		</view>
		
		<!-- 空  -->
		<view v-show="!defaultAddress.id" class="is-null">
			<view class="text">
				还没有收货地址
			</view>
		</view>
	</div>
</template>

<script>
	import AddressItem from "./components/address_item.vue"
	import {
		getAddressListApi
	} from "@/http/address.js"


	export default {
		data() {
			return {
				defaultAddressIndex: 0,
				defaultAddress:{id:null},
				addressList: []
			}
		},
		components: {
			AddressItem
		},
		onLoad() {
			this.getAddresList()
		},
		onShow() {
			this.getAddresList()
		},
		methods: {
			// 获取地址列表
			async getAddresList() {
				const res = await getAddressListApi()
				if(res.length == 0) return;
				res.forEach(item=>{
					item.area = `${item.provinceName} ${item.cityName} ${item.districtName}`
				});	
				// 
				this.defaultAddress = res[res.length-1];
				res.splice(res.length-1,1);
				this.addressList = res;
			},
		

			toAddAddress() {
				uni.navigateTo({
					url: "/pages/user/edit-address"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.address {
		width: 100%;
		background-color: #fbf9ec;
		min-height: 100vh;
		

		.address-wrap {
			padding: 30rpx 20rpx;

			.default-title {
				padding: 20rpx;
				padding-bottom: 0;
				font-size: 34rpx;
				background-color: #ffffff;
			}
		}


		.add-address-wrap {
			position: fixed;
			width: 100%;
			bottom: 5vh;
			display: flex;
			justify-content: center;
			align-items: center;

			.add-address {
				width: 70%;
				height: 5vh;
				background-color: #5ca45b;
				font-size: 36rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
			}
		}
	
		.is-null{
			height: calc(100vh - 220rpx);
			display: flex;
			justify-content: center;
			align-items: center;
			.text{
				display: flex;
				justify-content: center;
				align-items: center;
				color: #cbcabf;
				font-size: 40rpx;
				font-weight: 600;
			}
		}
	}
</style>